<template>
  <div class="app-container">
    <el-card style="position: relative;padding-bottom: 30px;" >
      <div slot="header" class="clearfix">
        <span>人员信息建档</span>
      </div>
      <el-form ref="form" :model="form" :rules="rules" size="medium" label-width="150px">
        <div class="linebox">
          <el-divider content-position="left">人员基础信息</el-divider>
          <el-row>
            <el-col :span="18">
              <el-row>
                <el-col :span="9">
                  <el-form-item label="人员姓名" prop="staffName">
                    <el-input v-model="form.staffName" placeholder="请输入人员姓名" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="9">
                  <el-form-item label="证件类型" prop="staffCardType">
                    <el-select v-model="form.staffCardType" placeholder="请选择证件类型">
                      <el-option
                        v-for="dict in dict.type.person_id_type"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="证件号码" prop="staffCardNo">
                    <el-input v-model="form.staffCardNo" placeholder="请输入证件号码" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="9">
                  <el-form-item label="民族" prop="staffNation">
                    <el-select v-model="form.staffNation" placeholder="请选择民族">
                      <el-option
                        v-for="dict in dict.type.person_nation"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="出生日期" prop="staffBirthdate">
                    <el-date-picker clearable
                                    style="width: 100%;"
                                    v-model="form.staffBirthdate"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="请选择出生日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="9">
                  <el-form-item label="联系手机" prop="staffPhone">
                    <el-input v-model="form.staffPhone" placeholder="请输入联系手机" />
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="联系邮箱" prop="staffEmail">
                    <el-input v-model="form.staffEmail" placeholder="请输入联系邮箱" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="9">
                  <el-form-item label="发证日期" prop="staffCardSdate">
                    <el-date-picker clearable
                                    style="width: 100%;"
                                    v-model="form.staffCardSdate"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="请选择证件发证日期">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="发证机关" prop="staffCardFzunit">
                    <el-input v-model="form.staffCardFzunit" placeholder="请输入证件发证机关" />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="9">
                  <el-form-item label="证件有效期开始" prop="staffCardSdate">
                    <el-date-picker clearable
                                    style="width: 100%;"
                                    v-model="form.staffCardSdate"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="请选择证件有效期开始">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="9">
                  <el-form-item label="证件有效期截止" prop="staffCardEdate">
                    <el-input v-model="form.staffCardEdate" placeholder="请输入证件有效期截止" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <div class="text-center">
                <staffImage />
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="住址" prop="staffAddr">
                <el-input v-model="form.staffAddr" placeholder="请输入住址" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注信息">
                <el-input type="textarea" v-model="form.staffRemark" :maxlength="1000" :autosize="{ minRows: 5, maxRows: 5}" placeholder="请输入备注信息"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-row>
          <el-col :span="24">
            <el-form-item>
              <el-button type="primary" @click="submitForm" v-hasPermi="['company:basic:perfectInfo']">保存信息</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { addBasic } from "@/api/staff/basic";
import staffImage from "./staffImage";
export default {
    name: "StaffAdd",
    dicts: ['person_nation', 'person_id_type'],
    components: { staffImage },
    data() {
      return {
        // 表单参数
        form: {
          staffCardType: 'RY_ID_TYPE_01',
        },
        // 表单校验
        mapDlg:false,
        rules: {
          staffName: [
            {required: true, message: "人员姓名不能为空", trigger: "blur"}
          ],
          staffCardType: [
            {required: true, message: "证件类型不能为空", trigger: "blur"},
          ],
          staffCardNo: [
            {required: true, message: "证件号码不能为空", trigger: "blur"},
          ],
          staffCardFzdate: [
            {required: true, message: "证件发证日期不能为空", trigger: "blur"}
          ],
          staffCardFzunit: [
            {required: true, message: "证件发证机关不能为空", trigger: "blur"},
          ],
          staffCardSdate: [
            {required: true, message: "证件有效期开始不能为空", trigger: "blur"},
          ],
          staffCardEdate: [
            {required: true, message: "证件有效期截止不能为空", trigger: "blur"},
          ],
          staffNation: [
            {required: true, message: "民族不能为空", trigger: "blur"},
          ],
          staffBirthdate: [
            {required: true, message: "出生日期不能为空", trigger: "blur"},
          ],
          staffPhone: [
            {required: true, message: "联系手机不能为空", trigger: "blur"},
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: "请输入正确的手机号码",
              trigger: "blur"
            }
          ],
          staffEmail: [
            {required: true, message: "联系邮箱不能为空", trigger: "blur"},
            {
              type: "email",
              message: "请输入正确的邮箱地址",
              trigger: ["blur", "change"]
            }
          ],
          staffAddr: [
            {required: true, message: "住址不能为空", trigger: "blur"},
            {min: 2, max: 200, message: '住址长度必须介于 2 和 200 之间', trigger: 'blur'}
          ],
          staffRemark: [
            {required: true, message: "备注不能为空", trigger: "change"}
          ],
        },
        fileList: [], // 文件列表
        fileIds: [],
      };
    },
    created() {
      this.getList()
    },
    methods: {
      async getList() {
        this.loading = true;
      },
      submitForm() {
        if (this.fileValidate(this.fileList)){
          this.$refs['form'].validate((valid) => {
            if (valid) {
              this.$set(this.form, 'fileIds', this.fileIds);
              addBasic(this.form).then(res => {
                this.$message({
                  message: '项目信息建档成功！',
                  type: 'success'
                });
                this.getList();
              })
            }
          });
        }
      },
      getFileData (fileDataList, fileIds){
        this.fileList = fileDataList;
        this.fileIds = fileIds;
      },
      fileValidate(fileDataList){
        let flag = true;
        for (const item of fileDataList) {
          if (item.fileConfigMust == 1 && item.childrenList.length == 0){
            this.$notify.error({
              title: '文件必传校验',
              message: `${item.fileCatalogName} 文件必穿，请上传！`,
              offset: 200
            });
            flag = false;
            break; // 一旦发现有必传文件未上传，就终止循环
          }
        }
        return flag;
      }
    }
  }
</script>
<style lang="scss">
  .linebox {
    border: 1px solid #eee;
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 0 15px;
  }

  /* 输入框或下拉选框禁用时：加粗显示*/
  .el-input.is-disabled input{
    font-weight: bold !important;
    color: #606266 !important;
  }
</style>
